<template>
    <h2>常用API应用</h2>
    原生的:{{num}}<br>
    方法调用:{{myfun}}<br>
    ref变量：{{num2}}<br>
    <!--{{myfun2(3)}}-->
    <br>
    reactive中的对应：{{user.name}}
    <br>
    num2<input type="text" v-model="num2">
    <br>
    user.name: <input type="text" v-model="user.name">
    user.name: <input type="text" v-model="name">
</template>

<script>
    import {ref, reactive, toRefs, readonly} from 'vue'

    export default {
        name: "ComApi",
        setup() {
            let num = 1;
            let myfun = () => {
                console.log(num);
            }
            //普通变量-响应式-用这个ref
            let num2 = ref(2);
            let myfun2 = (newvalue) => {
                console.log(num2);
                //这里会循环调用，如果是直接赋值就不会，不知道为什么
                // num2.value = num2.value + newvalue
                //这里会调用2次，在num2被赋值后，又被调用了一次，我感觉跟{{myfun2}}有关
                num2.value = newvalue
            }
            //对象变量-响应式-用reactive
            let user = reactive({
                name: 'aaa',
                age: 12
            })
            //转换为非响应式
            let user_readonly = readonly(user)
            return {num, myfun, num2, myfun2, user, ...toRefs(user)}
        }
    }
</script>

<style scoped>

</style>
